import React, { forwardRef } from 'react';
import TrafficFlowPrediction from '../traffic-flow-prediction/traffic-flow-prediction';
import SceneMonitor from '../scene-monitor/scene-monitor';
import StatusBar from '../status-bar/status-bar';
import './index.scss';

export interface CityStationRightPanelProps {
  /**
   * 组件宽度
   */
  width?: string | number;

  /**
   * 组件高度
   */
  height?: string | number;

  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  /**
   * 流量预测组件配置
   */
  trafficFlowPrediction?: {
    statusBar?: {
      title?: string;
      subtitle?: string;
    };
    dataStats?: any;
    dayChartTitle?: {
      title?: string;
    };
    lineChart?: any;
  };

  /**
   * 场景监控组件配置
   */
  sceneMonitor?: {
    cameras?: Array<{
      id: string;
      name: string;
      isActive?: boolean;
      hasSignal?: boolean;
    }>;
    mainBackgroundImage?: string;
    cameraButtonBackground?: string;
    cameraButtonBorder?: string;
    cameraTextColor?: string;
    signalIndicatorColor?: string;
    signalGlowColor?: string;
    showSignalIndicator?: boolean;
    buttonSpacing?: number;
    theme?: 'light' | 'dark';
  };

  // 低代码平台相关属性
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const CityStationRightPanel = forwardRef<HTMLDivElement, CityStationRightPanelProps>(({
  width = 500,
  height = 1000,
  noResponsiveScale = true,
  style = {},
  className = '',
  trafficFlowPrediction = {},
  sceneMonitor = {},
  __designMode,
  componentId,
  _componentName,
  forwardRef: forwardRefProp,
  ...otherProps
}, ref) => {

  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    ...style
  };

  const classNames = [
    'hzdz-city-station-right-panel',
    noResponsiveScale ? 'no-responsive-scale' : '',
    className
  ].filter(Boolean).join(' ');

  // 计算子组件的宽高
  const containerWidth = typeof width === 'number' ? width : 500;
  const containerHeight = typeof height === 'number' ? height : 1000;

  // 预测模块占60%高度，状态栏占5%高度，场景监控模块占35%高度
  const topSectionHeight = Math.floor(containerHeight * 0.6);
  const statusBarHeight = Math.floor(containerHeight * 0.05);
  const bottomSectionHeight = Math.floor(containerHeight * 0.35);

  return (
    <div
      ref={ref}
      className={classNames}
      style={componentStyle}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 上半部分：流量预测 */}
      <div className="top-section">
        <TrafficFlowPrediction
          width={containerWidth}
          height={topSectionHeight}
          noResponsiveScale={noResponsiveScale}
          {...trafficFlowPrediction}
          __designMode={__designMode}
        />
      </div>


      {/* 下半部分：场景监控 */}
      <div className="bottom-section">
              {/* 中间部分：状态栏 */}
        <StatusBar
          chineseText="视频监控"
          englishText="VIDEO MONITORING"
          noResponsiveScale={noResponsiveScale}
          theme="dark"
          __designMode={__designMode}
        />
        <SceneMonitor
          width={containerWidth}
          height={bottomSectionHeight}
          {...sceneMonitor}
          __designMode={__designMode}
        />
      </div>
    </div>
  );
});

CityStationRightPanel.displayName = 'CityStationRightPanel';

export default CityStationRightPanel;
